.bubble-cover {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 0.5s;

  &__radius {
    border-radius: 10px;
  }

  &__shadow {
    box-shadow: 0 15px 20px var(--gray_opacity_2);
  }

  &__bg {
    width: 100%;
    height: 100%;

    &-img {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      background-size: cover;
      background-position: center;
      transition: background-image 0.5s linear;
    }

    &-blur {
      filter: brightness(50%);

      .bubble-cover__bg-img {
        filter: blur(15px);
        transform: scale(1.1);
      }
    }
  }

  &__canvas {
    position: absolute;
    left: 0;
    top: 0;
  }
}
